<template>
	<view>
		<view class="title-class-box">
			<view class="title-class-view">车龄</view>
			<view class="title-unit-class">(年)</view>
		</view>
		<sortCar :data="ageDataList" :name="sortName" @sortItemtap='sortItemtap'></sortCar>
		<view class="btn_class" @tap="btn_confirm()">确定</view>
	</view>
</template>

<script>
	import sortCar from '@/components/sortCar/sortCar.vue';
	export default {
		components: {
			sortCar
		},
		name: "ageSelected",
		props: {
			/**
			 * 
			 * 
			 */
			selectedName: {
				type: String,
				default: '不限车龄'
			}


		},
		data() {
			return {
				title: '',
				rangeMin: 0,
				rangMax: 16,
				rangeValue: [0, 16],
				sortName: '不限车龄',

				ageDataList: [{
					title: '1',
					name: '不限车龄',
					start_car_age: 0,
					end_car_age:0
				}, {
					title: '2',
					name: '1年以下',
					start_car_age: 0,
					end_car_age:2
				}, {
					title: '3',
					name: '2年以下',
					start_car_age: 0,
					end_car_age:3
				}, {
					title: '4',
					name: '4年以下',
					start_car_age: 0,
					end_car_age:3
				}, {
					title: '5',
					name: '6年以下',
					start_car_age: 0,
					end_car_age:5
				}, {
					title: '6',
					name: '8年以下',
					start_car_age: 0,
					end_car_age:8
				}],
				start_car_age: 0,
				end_car_age:0

			}
		},
		beforeMount() {
			console.log('准备开始挂在页面元素');
			this.sortName = this.selectedName
		},
		methods: {
			format(val) {
				this.$utils.log("打印" + JSON.stringify(val))
				return val
			},
			handleRangeChange(e) {
				this.rangeValue = e
				this.$utils.log("打印 handleRangeChange " + JSON.stringify(e))
			},
			sortItemtap(item) {
				this.sortName = item.name
				this.$utils.log(JSON.stringify(item))
				this.start_car_age = item.start_car_age
				this.end_car_age = item.end_car_age
				switch (item.title + "") {
					case "1": {
						break;
					}
					case "2": {
						break;
					}
					case "3": {
						break;
					}
					case "4": {
						break;
					}
					case "5": {
						break;
					}
					case "6": {
						break;
					}
				}
			},
			btn_confirm() {
				this.$emit('btn_confirmAge', this.start_car_age,this.end_car_age, this.sortName)
			}
		}
	}
</script>

<style>
	.title-class-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 10rpx 20rpx;
	}

	.title-unit-class {
		color: #ccc;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.btn_class {
		margin: 20rpx 80rpx;
		padding: 20rpx;
		text-align: center;
		background-color: #0B5AE9;
		color: white;
		font-weight: bolder;
		border-radius: 20rpx;
	}
</style>